<template>
  <div>
    <!-- 查找 -->
    <el-space>
      <el-select class="m-2" placeholder="请选择用户状态" v-model="seekData.status">
        <el-option label="冻结" :value="0" />
        <el-option label="激活" :value="1" />
        <el-option label="全部" value />
      </el-select>
      <el-select class="m-2" placeholder="请选择用户会员等级" v-model="seekData.level">
        <el-option label="普通会员" :value="0" />
        <el-option label="VIP会员" :value="1" />
        <el-option label="全部" value />
      </el-select>
      <el-select class="m-2" placeholder="请选择用户性别" v-model="seekData.gender">
        <el-option label="女" :value="1" />
        <el-option label="男" :value="2" />
        <el-option label="全部" value="3" />
      </el-select>
      <el-input v-model="seekData.id" placeholder="请输入用户Id" />
      <el-input v-model="seekData.nickname" placeholder="请输入昵称" />
      <el-button type="primary" :icon="Search" @click="findData">查找</el-button>
    </el-space>
    <!-- 会员数据表格 -->
    <el-table :data="memberData" border style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center" />
      <el-table-column prop="nickname" label="昵称" align="center" />
      <el-table-column prop="phone" label="手机号码" align="center" />
      <el-table-column prop="gender" label="性别" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.gender == 1 ? "女" : "男" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="会员等级" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.level ? "VIP会员" : "普通会员" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="生日" align="center">
        <template
          #default="scope"
        >{{scope.row.birthday ? new Date().format(scope.row.birthday).substring(0, 11): ""}}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.status ? "激活" : "冻结" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtLastLogin" label="上次登录时间" align="center" width="200">
        <template #default="scope">{{ new Date().format(scope.row.gmtLastLogin).substring(5) }}</template>
      </el-table-column>
      <el-table-column prop="lastLoginIp" label="上次登录IP" align="center" />
      <el-table-column prop="address" label="操作" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            @click="changeStatus(scope.row.status ? 0 : 1, scope.row.id)"
          >{{ scope.row.status ? "冻结" : "激活" }}</el-button>
          <el-button type="primary" @click="handleRedact(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框编辑 -->
    <el-dialog v-model="dialogVisible" title="编辑" width="30%" :before-close="handleClose">
      <!-- 添加表单 -->
      <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm">
        <!-- 隐藏的用户id -->
        <el-form-item label="隐藏的用户id" prop="id">
          <el-input v-model.trim="ruleForm.id" style="width: 360px" />
        </el-form-item>
        <div class="from">
          <!-- 用户昵称 -->
          <el-form-item label="用户昵称">
            <el-input v-model.trim="ruleForm.nickname" style="width: 360px" />
          </el-form-item>
          <!-- 用户手机号 -->
          <el-form-item label="用户手机号">
            <el-input v-model.trim="ruleForm.phone" style="width: 360px" />
          </el-form-item>
          <!-- 用户密码 -->
          <el-form-item label="用户密码">
            <el-input type="password" v-model.trim="ruleForm.password" style="width: 360px" />
          </el-form-item>
          <!-- 用户性别 -->
          <el-form-item label="用户性别">
            <el-select class="m-2" v-model="ruleForm.gender">
              <el-option label="女" :value="1" />
              <el-option label="男" :value="2" />
            </el-select>
          </el-form-item>
          <!-- 用户等级 -->
          <el-form-item label="用户等级">
            <el-select class="m-2" v-model="ruleForm.level">
              <el-option label="普通会员" :value="0" />
              <el-option label="VIP会员" :value="1" />
            </el-select>
          </el-form-item>
          <!-- 用户状态 -->
          <el-form-item label="用户状态">
            <el-select class="m-2" v-model="ruleForm.status">
              <el-option label="冻结" :value="0" />
              <el-option label="激活" :value="1" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="SaveChanges">修改</el-button>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <pa-ging v-bind="pages" @changePage="changePage" @changeLimit="changeLimit" />
  </div>
</template>

<script>
import { Search } from "@element-plus/icons-vue";
import { post } from "@/utlis/http";
export default {
  setup() {
    return {
      Search,
    };
  },
  data() {
    return {
      memberData: [], //会员表格数据
      pages: {
        page: 1, //页
        limit: 10, //条
        total: 10, //总条数
      },
      dialogVisible: false, //对话框
      ruleForm: {
        id: "", //id
        nickname: "", //昵称
        phone: "", //手机号码
        password: "", //用户密码
        gender: "", //性别
        level: "", //会员等级
        status: "", //状态
      },
      seekData: {
        id: "", //id
        nickname: "", //昵称
        phone: "", //手机号码
        gender: "", //性别
        level: "", //会员等级
        status: "", //状态
      },
    };
  },
  created() {
    this.initiaLize();
  },
  methods: {
    //渲染数据
    initiaLize() {
      let data = {
        _gp: "admin.user",
        _mt: "list",
        id: this.seekData.id,
        nickname: this.seekData.nickname,
        level: this.seekData.level,
        gender: this.seekData.gender,
        status: this.seekData.status,
        pageNo: this.pages.page,
        limit: this.pages.limit,
      };
      post(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.memberData = data.items;
          this.pages.total = data.total;
        }
      });
    },
    //编辑
    handleRedact(row) {
      Object.assign(this.ruleForm, row);
      this.dialogVisible = true;
    },
    // 保存编辑
    SaveChanges() {
      let phone = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (this.ruleForm.nickname == "") {
        ElMessage.warning("用户昵称不能为空");
        return;
      }
      if (this.ruleForm.phone == "") {
        ElMessage.warning("用户手机号不能为空");
      } else if (!phone.test(this.ruleForm.phone)) {
        ElMessage.warning("手机号输入不合法,必须为11位数字并填写正确的格式");
        return;
      }
      if (this.ruleForm.password == "") {
        ElMessage.warning("用户密码不能为空");
        return;
      }
      let data = {
        _gp: "admin.user",
        _mt: "edit",
        user: JSON.stringify({ ...this.ruleForm }),
      };
      post(data).then((res) => {
        let { errno, errmsg } = res.data;
        if (200 == errno) {
          ElMessage.success("修改成功");
          this.dialogVisible = false;
          this.initiaLize();
        } else {
          ElMessage.warning(errmsg);
        }
      });
    },
    //激活冻结
    changeStatus(row, rowId) {
      let data = {
        _gp: "admin.user",
        _mt: "editStatus",
        userId: rowId,
        status: row,
      };
      post(data).then((res) => {
        if (200 == res.data.errno) {
          ElMessage({
            type: "success",
            message: row ? "激活成功" : "冻结成功",
          });
          this.initiaLize();
        }
      });
    },
    //查找
    findData() {
      this.initiaLize();
    },
    //条
    changeLimit(val) {
      this.pages.limit = val;
      this.initiaLize();
    },
    //页
    changePage(val) {
      this.pages.page = val;
      this.initiaLize();
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin: 20px 0px 40px 0px;
}
.from {
  margin: auto;
  & /deep/ .el-form-item__label::before {
    content: "*";
    color: red;
    margin-right: 5px;
  }
}
</style>

